<template>
    <div id="maptitles">
            <!-- <h3>压力大，很恼火，人又菜，没办法！</h3> -->
        <Search></Search>
        <Layerbox></Layerbox>
        <div class="switch" >
            <div class="vector">矢量地图</div>
            <div class="dom">影像地图</div>
        </div>
    </div>
        
</template>

<script>
//mapboxgl
// import mapboxgl from "mapbox-gl"
import mapboxgl from 'mapbox-gl'
//mapbox中的图层?
import { MapboxLayer } from '@deck.gl/mapbox'
//图层？
import { Tile3DLayer } from '@deck.gl/geo-layers'
//导入导航组建
import Search from './Search.vue'
import Layerbox from './LayerBox.vue'
//引入mapbox-gl.css
import 'mapbox-gl/dist/mapbox-gl.css'
//mapbox的token
mapboxgl.accessToken = 'pk.eyJ1Ijoid2FueWFueWFuIiwiYSI6Im1uNVZnTncifQ.90XY40_yjpItUHO8HnbbpA'



export default {
     components: {
          Search,
          Layerbox
     },
    data() {
        return {
            //地图为空
            map: {}
        }
    },
    //添加图层
    add3DModel() {
        //创建自己的图层layer
        const my3dLayer = new MapboxLayer({
            id: 'my-3dlayer',
            type: Tile3DLayer,
            data: 'http://localhost/tiles/tileset.json'
        })
        this.map.addLayer(my3dLayer)
    },
    mounted() {
        this.map=window.map=new mapboxgl.Map({
        container: 'maptitles',
        //矢量
        // style:'mapbox://styles/mapbox/streets-v11',
        //卫星
        style:'mapbox://styles/mapbox/satellite-v9',
        bearing: 124.5,
        pitch: 54,
        center: [114.41876113414763, 30.461325698256747],
        zoom: 18
        })
    }
}
</script>

<style lang="less" scoped>
#maptitles {
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: left;
  display: flex;
  .switch{
      width: 120px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content:space-around;
      position: absolute;
      left: 30px;
      bottom: 30px;
      z-index: 10;
  }
}


</style>